<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Es列表</title>
    <!-- jquery -->
    <script src="../js/jquery.min.js"></script>
    <!-- bootstrap -->
    <script src="../js/bootstrap3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css"/>
    <!-- bootstrap table -->
    <script src="../js/bootstrap-table/bootstrap-table.js"></script>
    <link rel="../js/bootstrap-table/bootstrap-table.css"/>
    <script src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- bootstrap 时间 -->
    <script src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <!-- bootstrap 弹框 -->
    <script src="../js/bootstrap-bootbox/bootbox.js"></script>
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-heading">
            高级搜索
        </div>
        <div class="panel-body">
            <div class="container-fluid">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="productName" class="col-sm-1 control-label">商品名称</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" id="productName"/>
                        </div>
                        <label for="productPrice" class="col-sm-1 control-label">价格</label>
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" class="form-control date" id="startPrice"/>
                                <div class="input-group-addon"><i class="glyphicon glyphicon-minus"></i></div>
                                <input type="text" class="date form-control" id="endPrice"/>
                            </div>
                        </div>
                        <label for="asc" class="col-sm-1 control-label">价格排序</label>
                        <div class="col-sm-2">
                            <select class="form-control" id="asc" name ="asc">
                                <option value="-1">请选择</option>
                                <option value="1">从低到高</option>
                                <option value="2">从高到低</option>
                            </select>
                        </div>
                        <div class="col-sm-1 col-sm-offset-1">
                            <button onclick="searchGoods()" type="button" class="btn btn-info "><i class="glyphicon glyphicon-search"></i>搜索</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="goodsTable"></div>
</body>
<script>
    //初始化商品列表
    $(function(){
        initGoodsTable();
    })

    //条件查询
    function searchGoods(){
        var productName = $("#productName").val();
        var startPrice = $("#startPrice").val();
        var endPrice = $("#endPrice").val();
        var asc = $("#asc").val()
        //alert(asc)
        $("#goodsTable").bootstrapTable("refresh",{
            query:{
                page:'1',
                productName:productName,
                startPrice:startPrice,
                endPrice:endPrice,
                asc:asc
            }
        });
    }

    //加载列表
    function initGoodsTable(){
        $("#goodsTable").bootstrapTable({
            url:'../product/findGoodsList',
            method:'post',
            contentType:'application/x-www-form-urlencoded',//post请求按照表单方式
            pagination:true,
            clickToSelect: true, //是否启用点击选中行
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页
            striped:true,//斑马线
            queryParams:function(){
                return {
                    page:this.pageNumber,
                    rows:this.pageSize
                };
            },
            columns:[
                {checkbox:true},
                //{field:'id',title:'商品Id'},
                {field:'productName',title:'商品名称'},
                {field:'productImg',title:'商品图片',formatter:function(value,row,index){
                        return '<img src="'+value+'" width="50px" height="50px">'
                }},
                {field:'productColor',title:'商品颜色'},
                {field:'typeName',title:'商品类型'},
                {field:'productPrice',title:'商品价格'},
                {field:'stockNumber',title:'商品库存'},
            ]
        })
    }


</script>
</html>